<template>
<div id="views">
  <div class="content">
    <section class="sec1">
      <p class="title textCenter">
        <img src="../../common/imgs/danwa.png" class="middle" alt=""><span class="middle">BTC</span>
      </p>
      <p class="allNum textCenter">
        <span v-if="Number(allProduct)">{{this.numSlice(allProduct , 8)}}</span>
      </p>
    </section>
    <section class="productType">
      <span class="hoverhand" :class="productType == 0 ? 'active' : ''" @click="choseType(0)">BTC算力</span>
      <span class="hoverhand"  :class="productType == 1 ? 'active' : ''" @click="choseType(1)">IPFS算力</span>
    </section>
    <p class="p1">
<!--      <span class="left">挖矿产出</span>-->
      <span class="right hoverhand" @click="openBhpay">双挖分币 ></span>
    </p>
    <ul class="list">
      <li v-for="(item , index ) in list">
        <p class="p1">
          <span class="floatleft">BTC</span>
          <span class="floatright" >{{item.incomeDate}}</span>
        </p>
        <div class="content">
          <div class="floatleft left">
            <p class="p1">总算力</p>
            <p class="p2">{{item.incomePower}}T</p>
          </div>
          <div class="floatleft center">
            <p class="p1">合约冻结</p>
            <p class="p2">{{item.insuranceFrozenIncomeNum}} BTC</p>
            <p class="p3">￥{{item.freeze_rmb}}</p>
          </div>
          <div class="floatright right">
            <p class="p1">总产出(含冻结)</p>
            <p class="p2">+{{item.num}} BTC</p>
            <p class="bhpIncome" v-if="Number(item.bhpIncomeNum) > 0">+{{item.bhpIncomeNum}} BHP</p>
            <p class="p3">￥{{item.total_price}}</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <div class="notProduct" v-if="showNotProduct">
    <img src="../../common/imgs/not_power_product.png" alt="暂无">
  </div>
  <div class="loadToast" v-if="showLoad">{{loadinfo}}</div>
</div>
</template>
<script>
  import { powerProduct , getBhpayUrl , ipfsProduct} from '../../http/api'
  export default {
    name : 'power_product',
    data(){
      return{
        introduce : '算力产出',
        allProduct:"---",
        loadinfo : '加载中...',
        list:[],
        showLoad : true,
        showNotProduct : false,
        productType : 0
      }
    },
    mounted() {
      let thiz = this;
      this.loadinfo = '加载中...';
      powerProduct().then(res => {
        if(res.code == 200){
          thiz.list = res.data.lists;
          thiz.allProduct = res.data.total_btc;
          thiz.setLoad();
        }
      })
    },
    methods:{
      setLoad(){
        let len = this.list.length;
        this.loadinfo = '到底了...';
        if(len === 0){
          this.showLoad = false;
          this.showNotProduct = true;
        }
      },
      openBhpay(){
        getBhpayUrl().then(res => {
          if(res.code == 200){
            if(res.data){
              // window.location.href = res.data;
              this.$router.push({path : '/power_product_detail' , query:{uri : res.data}})
            }
          }
        })
      },
      choseType( index ){
        if(this.productType != index){
          this.productType = index;
          if(index == 1){
            ipfsProduct().then(res => {
              if(res.code == 200){
                let url = res.data.url;
                window.location.href = url;
              }
            })
          }
        }

      }
    }
  }
</script>
<style scoped type="text/less" lang="less">
#views{
  padding: 0.42rem 0.3rem;padding-bottom: 0rem;
  .sec1{
    height: 2.1rem;background: url("../../common/imgs/power_product_bg.png") center center no-repeat;background-size: 100% 100%;
    .title{
      font-size: 0.28rem;line-height: 0.25rem;padding-top: 0.53rem;vertical-align: middle;
    }
    img{
      width: 0.25rem;margin-right: 0.06rem;
    }
    >.allNum{
      font-size: 0.48rem;padding-top: 0.34rem;
    }
  }
  >.content{
    >.p1{
      overflow: hidden;
      >span{
        display: inline-block;padding-bottom: 0.25rem;
      }
      >.left{
        color: #181818;font-size: 0.32rem;float: left;
      }
      >.right{
        float: right;color: #898989;font-size: 0.24rem;
      }
    }
  }
  .list{
    >li{
      padding: 0.25rem 0.29rem;background: #fff;border-radius: 0.04rem;margin-top: 0.2rem;
      >.p1{
        overflow: hidden;font-size: 0.26rem;
        span:nth-child(2){
          color: #898989;
        }
      }
      >.content{
        overflow: hidden;padding-top: 0.38rem;
        >div{
          >.p1 , >.p3{
            color: #ADADAD;font-size: 0.2rem;
          }
          >.p2{
            font-size: 0.22rem;padding: 0.16rem 0;
          }
          >.bhpIncome{
            padding-bottom: 0.16rem;font-size: 0.22rem;
          }
        }
        >.left{
          width: 34%;
        }
        >.center{
          width: 32%;
        }
        >.right{
          width: 34%;text-align: right;
        }
      }
    }
    >li:first-child{
      margin-top: 0;
    }
  }
  >.notProduct{
    text-align: center;padding: 1.6rem 0;
    img{
      width: 2.39rem;
    }
  }
  .productType{
    font-size: 0.28rem;color: #898989;text-align: center;display: block;
    >span{
      padding: 0.25rem 0.6rem;padding-top: 0.35rem;padding-bottom:0.35rem;display: inline-block;position: relative;
    }
    >span.active:after{
      content: '';display: inline-block;width: 0.6rem;height: 0.04rem;background: #ffd309;position: absolute;
      bottom: 0.2rem;z-index: 1;left: 50%;margin-left: -0.3rem;
    }
  }
}
</style>
